<template>
	<div class="c-cheap">
		
		<invit v-if="invitFlg" @changeFlg="changeFlg"/>
		<header>
			<svg-icon iconClass="back" @click="$router.go(-1)" style="color:#fff"/>
		</header>
		<div class="c-banner">
			<img src="@/images/cheap_1.png" alt="">
		</div>
		<div class="again">
			<button class="again_btn" @click="againkill">再来一刀</button>
		</div>
		<div class="c-price">
			<span class="c-timer">
				<van-count-down :time="time"/>后过期
			</span>
			<p>已砍1515.94元，距离免费拿仅差百分之</p>
			<h6>0.05
				<b>元</b>
			</h6>
			<h5>
				<van-progress
					stroke-width="9"
					:percentage="96.6"
					pivot-text="仅剩0.4%"
					pivot-color="#E76136"
					color="linear-gradient(to right,#EA9A7C, #E76136)"
				/>
				<dt class="sansan"></dt>
			</h5>
			<h4>预计在邀请5人，直接免费拿</h4>
		</div>
		<div class="c-person">
			<p>砍价记录</p>
			<div class="c-menu" v-for="item in list" :key="item.id">
				<div class="c-left">
					<img :src="item.url" alt="">
					<dd class="c-menu-dd">
						<span>{{ item.name }}</span>
						<a class="c-er">金币砍一刀</a>
					</dd>
				</div>
				<div>
					<span class="c-san">砍掉{{ item.num }}%</span>
					<span>({{ item.price }}.00元)</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import invit from "@/components/Invit.vue"
export default {
	components:{
		invit
	},
  data() {
    return {
      time: 60 * 60 * 8 * 1000,
      list: [],
			invitFlg:false
    }
  },
  created() {
    this.$api.cheapList().then((res) => {
      this.list = res.list
    })
  },
	methods: {
		changeFlg(flg){
			this.invitFlg=flg;
		},
		againkill(){
			this.invitFlg=true;
			localStorage.setItem("key",1)
		},
	},
}
</script>

<style lang='scss' scoped>
@import '@css/style.scss';
.invit{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
}
.again {
  width: 100%;
	height: px2rem(50);
  background: linear-gradient(#941c1d, #941c1d, #ff6437);
	margin: px2rem(20) 0;
  .again_btn {
    border: 0;
		display: block;
    margin: 0 auto;
		width: 70%;;
    padding: px2rem(15) px2rem(30);
    font-size: px2rem(16);
		border-radius: px2rem(50);
  }
}
header {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 px2rem(15);
}
.c-banner {
  width: 100%;
  height: px2rem(290);
  img {
    width: 100%;
    display: block;
    height: 100%;
  }
}
.sansan {
  width: 0;
  height: 0;
  margin: 0 auto;
  border: 5px solid transparent;
  border-top: 10px solid #e76136;
  position: absolute;
  top: -9px;
  right: 57px;
}
.c-cheap {
  width: 100%;
  height: auto;
  display: flex;
  padding-bottom: px2rem(25);
  flex-direction: column;
  background: linear-gradient(
    rgb(148, 28, 29),
    rgb(148, 28, 29),
    rgb(255, 100, 55)
  );
  color: rgb(232, 104, 58);
}
.c-timer {
  display: flex;
  background: #fff;
  color: rgb(179, 160, 85);
  line-height: px2rem(20);
  position: absolute;
  top: 0;
  left: 50%;
  font-size: px2rem(10);
  padding: 0 px2rem(20);
  transform: translateX(-50%);
  font-weight: 600;
  text-align: center;
  font-weight: 600;
  border-bottom-left-radius: px2rem(16);
  border-bottom-right-radius: px2rem(16);
  /deep/.van-count-down {
    color: rgb(179, 160, 85);
    font-weight: 600;
    margin-right: px2rem(2);
  }
}
.c-price {
  background: rgb(255, 225, 216);
  width: 92%;
  height: px2rem(170);
  margin: 0 auto;
  border-radius: px2rem(15);
  margin-bottom: px2rem(12);
  font-size: px2rem(14);
  position: relative;
  p {
    width: 100%;
    height: px2rem(40);
    line-height: px2rem(40);
    justify-content: center;
    margin-top: px2rem(15);
    display: flex;
    font-weight: 600;
  }
  h4 {
    width: 100%;
    height: px2rem(20);
    line-height: px2rem(20);
    justify-content: center;
    margin-top: px2rem(13);
    display: flex;
    font-weight: 600;
  }
  h5 {
    padding: 0 px2rem(35);
    margin-top: px2rem(12);
    position: relative;
    /deep/ .van-progress {
      position: relative;
      height: px2rem(4);
      background: rgb(255, 185, 159);
      border-radius: px2rem(4);
    }
    /deep/ .van-progress__pivot {
      top: px2rem(-18);
      right: -10px;
      width: 75px;
    }
  }
  h6 {
    width: 100%;
    height: px2rem(50);
    padding: 0 px2rem(10);
    line-height: px2rem(50);
    justify-content: center;
    display: flex;
    font-weight: 400;
    font-size: px2rem(40);
    color: rgb(226, 69, 21);
    b {
      font-size: px2rem(28);
      line-height: px2rem(56);
    }
  }
}
.c-person {
  width: 92%;
  height: auto;
  background: rgb(255, 225, 216);
  margin: 0 auto;
  border-radius: px2rem(15);
  p {
    width: 100%;
    height: px2rem(40);
    background: rgb(237, 154, 124);
    border-top-left-radius: px2rem(15);
    border-top-right-radius: px2rem(15);
    color: white;
    font-size: px2rem(16);
    padding-left: px2rem(25);
    line-height: px2rem(40);
  }
  .c-menu {
    font-size: px2rem(10);
    justify-content: space-between;
    display: flex;
    padding: 0 px2rem(20);
    align-items: center;
    margin: px2rem(10) 0;
    .c-er {
      display: block;
    }
    .c-san {
      font-size: px2rem(12);
      font-weight: 600;
    }
    img {
      width: px2rem(45);
      height: px2rem(45);
      border-radius: 50%;
    }
  }
}
.c-left {
  display: flex;
  width: 40%;
  align-items: center;
}
.c-menu-dd {
  margin-left: px2rem(10);
}
</style>
